/* 定义登录页面的样式 */
.login {
  /* 使用flex布局实现内容的水平和垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 使登录页面占满整个屏幕高度 */
  height: 100vh;
  /* 添加背景图片并调整透明度 */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/logo_2logo_2.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 定义登录框的样式 */
.login-box {
  /* 设置登录框的宽度和高度 */
  width: 1000px;
  height: 474.38px;
  /* 设置登录框的圆角 */
  border-radius: 8px;
  /* 使用flex布局 */
  display: flex;
  /* 增加阴影效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 添加透明度 */
  background-color: rgba(255, 255, 255, 0.8);
  /* 增加内边距 */
  padding: 20px;
}

/* 定义登录框中图片的样式 */
.login-box img {
  /* 设置图片占登录框的60%宽度 */
  width: 60%;
  /* 保持图片的宽高比例 */
  height: auto;
}

/* 定义页面标题的样式 */
.title {
  /* 在水平和垂直方向上居中标题 */
  margin: 0px auto 30px auto;
  text-align: center;
  /* 设置标题文字颜色 */
  color: #ffffff;
  /* 增加标题的字体大小 */
  font-size: 24px;
}

/* 定义登录表单的样式 */
.login-form {
  /* 设置表单背景颜色 */
  background: #ffffff;
  /* 设置表单宽度 */
  width: 40%;
  /* 设置表单的右上角和左下角圆角 */
  border-radius: 0px 8px 8px 0px;
  /* 使用flex布局实现内容的水平和垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 增加内边距 */
  padding: 20px;
}

/* 定义登录表单的Element UI表单样式 */
.login-form .el-form {
  /* 设置表单的宽度和高度 */
  width: 214px;
  height: 307px;
}


/* 定义表单项的样式 */
.login-form .el-form-item {
  /* 设置表单项之间的下边距 */
  margin-bottom: 30px;
}

/* 定义有错误的表单项的样式 */
.login-form .el-form-item.is-error .el-input__inner {
  /* 移除默认的边框，只在底部添加红色边线 */
  border: 0 !important;
  border-bottom: 1px solid #fd7065 !important;
  /* 恢复输入框的背景颜色 */
  background: #fff !important;
}

/* 定义输入框图标样式 */
.login-form .input-icon {
  /* 设置图标的尺寸 */
  height: 32px;
  width: 18px;
  /* 微调图标位置 */
  margin-left: -2px;
}

/* 定义输入框的样式 */
.login-form .el-input__inner {
  /* 移除默认边框，只在底部添加灰线 */
  border: 0;
  border-bottom: 1px solid #e9e9e8;
  /* 移除默认圆角 */
  border-radius: 0;
  /* 设置字体样式 */
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  /* 设置输入框的尺寸 */
  height: 32px;
  line-height: 32px;
  /* 增加内阴影效果 */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 调整输入框前缀图标的位置 */
.login-form .el-input__prefix {
  left: 0;
}

/* 增加前缀图标的输入框的内边距 */
.login-form .el-input--prefix .el-input__inner {
  padding-left: 26px;
}

/* 定义输入框占位符的颜色 */
.login-form .el-input__inner::placeholder {
  color: #aeb5c4;
}

/* 统一表单项内容的行高 */
.login-form .el-form-item--medium .el-form-item__content {
  line-height: 32px;
}

/* 统一中等大小输入框图标的行高 */
.login-form .el-input--medium .el-input__icon {
  line-height: 32px;
}

/* 定义登录按钮的样式 */
.login-btn {
  /* 设置按钮的圆角和内边距 */
  border-radius: 17px;
  padding: 11px 20px !important;
  /* 在按钮上方增加间距 */
  margin-top: 10px;
  /* 设置字体样式 */
  font-weight: 500;
  font-size: 14px;
  /* 移除默认边框 */
  border: 0;
  /* 设置按钮背景颜色 */
  background-color: #3410e2;
  /* 设置文字颜色 */
  color: #ffffff;
  /* 增加过渡效果 */
  transition: all 0.3s ease;
}

/* 定义登录按钮悬停和焦点状态的样式 */
.login-btn:hover,
.login-btn:focus {
  /* 调整按钮的背景和文字颜色 */
  background-image:linear-gradient(120deg,#a1c4fd 0%, #c2e9fb 100%);
  color: #ffffff;
  /* 增加阴影效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 定义登录表单标题的样式 */
.login-form-title {
  /* 设置标题的高度，使其在垂直方向上居中 */
  height: 36px;
  /* 使用flex布局实现内容的水平和垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 在标题下方增加间距 */
  margin-bottom: 25px;
}

/* 定义标题标签的样式 */
.title-label {
  font-size: 20px;
  /* 设置文字颜色 */
  color: #333333;
  /* 在标签左边增加间距 */
  margin-left: 40px;


}

.login-form-title img {
  width: 110px;
  height: 95px;

}